<template>
    <el-card class="update-log" style="height: 200px;">
        <div slot="header" class="clearfix">
            <span>考试项目</span>
            <span class="header-more-title">
                <template >
                    <router-link :to="'/exam/sign-up'"  class="link-type">
                      <span>更多<i class="el-icon-arrow-right"></i></span>
                    </router-link>
                </template>
            </span>
        </div>
        <div class="body">
            <div v-if="!personProjectStatus">
                <el-row :gutter="24">
                    <el-col :span="24">
                        暂无考试项目
                    </el-col>
                </el-row>
            </div>
            <div v-if="personProjectStatus">
                <el-row :gutter="24">
                    <el-card shadow="hover" :body-style="{cursor:'pointer'}" style="float: left;margin-right: 10px;"
                             v-for="(examProject,index) in personExamProjectList" v-if="index < 5" @click.native="getConfirmExam(examProject)">
                        <div style="margin-bottom: 10px;"><span>{{examProject.examPlanDTO.projectName}}</span></div>
                        <div style="margin-bottom: 10px;"><span>{{examProject.examPlanDTO.examDate}} {{examProject.examPlanDTO.examStart}}~{{examProject.examPlanDTO.examEnd}}</span></div>
                        <div>
                            <span>{{examProject.examPlanDTO.examRoomDTO.examRoomName}}</span>
                            <span style="float: right;color: #00b7ee" v-if="examProject.examStatus === '4' ? true : false">{{examProject.examStatusStr}}</span>
                            <span style="float: right;color: red" v-if="examProject.examStatus === '1' || examProject.examStatus === '3' ? true : false">{{examProject.examStatusStr}}</span>
                            <span style="float: right;color: #B1B1B1" v-if="examProject.examStatus === '0' ? true : false">{{examProject.examStatusStr}}</span>
                        </div>
                    </el-card>
                </el-row>
            </div>

            <el-dialog :title="title" :visible.sync="open" v-if="open" width="55%" append-to-body>
                <div>
                    <el-form :model="examProjectForm" label-width="80px">
                        <el-form-item label="考生姓名" prop="name">
                            <el-input v-model="examProjectForm.name"  readonly="readonly"/>
                        </el-form-item>
                        <el-form-item label="考生工号" prop="staffNo">
                            <el-input v-model="examProjectForm.staffNo" readonly="readonly"/>
                        </el-form-item>
                        <el-form-item label="参考项目" prop="projectName">
                            <el-input v-model="examProjectForm.projectName" readonly="readonly"/>
                        </el-form-item>
                        <el-form-item label="考试时间" >
                            <el-input v-model="examProjectForm.examPlanDTO.examDate +' '+ examProjectForm.examPlanDTO.examStart + '~' +examProjectForm.examPlanDTO.examEnd" readonly="readonly"/>
                        </el-form-item>
                        <el-form-item label="考试须知" prop="examPlanDTO.examNotice">
                            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                                      v-model="examProjectForm.examPlanDTO.examNotice" readonly="readonly"/>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" style="float:right" class="dialog-footer">
                        <el-button :loading="buttonLoading" type="primary" size="mini" @click="submitConfirmExam">确 认</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </el-card>
</template>

<script>
    import {personExamProject,updateSignUp} from "@/api/exam/signUp";
    export default {
        name: "TestItem",
        data() {
            return {
                personProjectStatus: false,
                //个人近期考试项列表
                personExamProjectList: [],
                open: false,
                title: "",
                buttonLoading: false,
                examProjectForm: {},
            }
        },
        created() {
            //获取个人近期考试项
            this.getPersonProject();
        },
        methods: {
            // 查询个人考试项
            getPersonProject() {
                /*personExamProject().then(res => {
                    if (res.responseBody.length === 0) {
                        this.personProjectStatus = false;
                        return;
                    }
                    this.personExamProjectList = res.responseBody;
                    this.personProjectStatus = true;
                })*/
            },
            getConfirmExam(examProject) {
                console.log("选择的考试项：",examProject);
                var examStatus = examProject.examStatus;
                if ("4" === examStatus) {
                    this.examProjectForm = examProject;
                    this.open = true;
                    this.title = "考试确认";
                    return;
                }
                // this.msgWarning("");
            },
            submitConfirmExam() {
                var paperId = this.examProjectForm.examPlanDTO.paperId; // 试卷Id
                var paperType = this.examProjectForm.examPlanDTO.paperType; // 试卷类型
                var examPlanId = this.examProjectForm.examPlanId; // 考试计划Id
                var signUpId = this.examProjectForm.signUpId; // 在线考试 考生Id
                this.$confirm('考试信息确认正确!', "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(response => {
                    // 确认之后修改考试状态为考试中 1
                    console.log("确认之后修改考试状态为考试中");
                    this.examProjectForm.examStatus = '1'; // 1: 考试中
                    updateSignUp(this.examProjectForm).then(res => {
                    })
                    // 打开新页面--》考试页面
                    var routeUrl = this.$router.resolve({
                        //'&paperType='+paperType+ // 0: 证书考试
                        path: '/answer?paperId='+paperId+'&examType='+0+'&planId='+examPlanId+'&signUpId='+signUpId// 这里的路径就可以正常的写，不需要添加_blank: true
                    })
                    if ('2' === this.examProjectForm.obtainEvidenceStatus) {
                        routeUrl = this.$router.resolve({
                            //'&paperType='+paperType+ 2: 持续评估考试
                            path: '/answer?paperId='+paperId+'&examType='+2+'&planId='+examPlanId+'&signUpId='+signUpId// 这里的路径就可以正常的写，不需要添加_blank: true
                        })
                    }
                    window.open(routeUrl.href, '_blank');
                    location.reload(); // 刷新页面考试状态，

                });
            }
        }

    }
</script>
<style lang="scss" scoped>
    .body {
        .el-col-4 {
            padding-left: 5px;
            padding-right: 5px;
        }
    }
</style>

